import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

function Content2(props) {
  return (
    <div {...props} className="home-page-wrapper content2-wrapper">
      <OverPack className="home-page content2" playScale={0.3} component={Row}>
        <TweenOne
          key="img"
          animation={{
            x: '+=30',
            opacity: 0,
            type: 'from',
            ease: 'easeOutQuad',
          }}
          resetStyle
          className="content2-img"
          component={Col}
          componentProps={{
            md: 10,
            xs: 24,
          }}
        >
          <span>
            <img src="/images/tvQTfCupGUFKSfQ.png" width="100%" alt="img" />
          </span>
        </TweenOne>
        <QueueAnim
          type="left"
          key="text"
          leaveReverse
          ease={['easeOutCubic', 'easeInCubic']}
          className="content2-text"
          component={Col}
          componentProps={{
            md: 14,
            xs: 24,
          }}
        >
          <h2 key="h1" className="content2-title">分布式中间件</h2>
          <div key="p" className="content2-content">
            金融级联机交易处理中间件，大规模分布式计算机，数万笔/秒级并发能力，严格保证交易数据统一性。金融级联机交易处理中间件，大规模分布式计算机，数万笔/秒级并发能力，严格保证交易数据统一性。
          </div>
        </QueueAnim>
      </OverPack>
    </div>
  );
}

export default Content2;
